<template>
  <div style="background-color: #fff;">
    <main-layout>
      <div v-show="!selectLandVis" class="plantFormBox">

        <div class="formItem itemtitle" style="position:relative">
          <h5>选择作物品种</h5>
          <div class="myBtn" @click="close">
          <img src="/src/assets/back.png" alt="">
          返回
        </div>
          <div class="inputItem">
            <div>
              <crop-select
                v-model="formdata.cropId"
                width="200px"
                @change="(e) => { formdata.cropSeriesId = '';getWayList() }"
                @changeName="(e) => { formdata.cropName = e }"
              />
            </div>
            <div style="margin-left: 10px;">
              <crop-series-select
                placeholder="选择品种"
                v-model="formdata.cropSeriesId"
                :params="{param1:formdata.cropId,lovCode:'TANC_VALID_SERIES'}"
                width="200px"
                @changeName="(e) => { formdata.cropSeriesName = e }"
              />
            </div>
          </div>
          <div class="tips-text">提示:如未找到品种请选择手动创建方案。</div>
        </div>
        <div class="formItem itemtitle">
          <h5>亩产目标</h5>
          <div class="inputItem">
             <vxe-input v-model="formdata.targetYield" placeholder="输入平均每亩的产量目标" type="integer"
             @blur="blurTargetYield"
             style="width: 410px;"
             ></vxe-input>
            <div style="margin-left: 4px;">kg</div>
          </div>
          <div v-if="showRed && formdata.targetYield!=''" class="show-error">输入亩产目标不符合实际需求，请核实修改</div>
        </div>
        <div class="formItem itemtitle">
          <h5>耕种方式</h5>
          <div class="inputItem" style="background-color:#fff;border:none">
              <el-radio-group v-model="formdata.tillageWayId">
                <el-radio :label="item.code" v-for="item in tillageWayList">{{item.meaning}}</el-radio>
              </el-radio-group>
          </div>
        </div> 
        <div class="formItem itemtitle" v-if="formdata.cropId==1">
          <h5>再生稻管理</h5>
          <div class="inputItem" style="background-color:#fff;border:none">
            <el-radio-group v-model="formdata.isZaisheng">
                     <el-radio :label="true">是</el-radio>
                     <el-radio :label="false">否</el-radio>
                  </el-radio-group>
          </div>
        </div>
        <div class="formItem itemtitle">
          <h5>种植地块</h5>
          <div class="inputItem">
              <el-input
                v-model="mapBackData.farmLandName"
                placeholder="选择种植地块"
                suffix-icon="Operation"
                readonly
                style="width: 410px;"
                @click="openSelectDg()"
              />
          </div>
        </div>
        
        <div style="padding: 20px 0 0 0; text-align:left">
          <el-button  @click="delSubmit">
            <el-icon color="#333" :size="16">
              <delete />
            </el-icon>
            清空</el-button>
            <el-button type="primary" @click="palnSubmit">
            <el-icon color="#fff" :size="16">
              <circleCheck />
            </el-icon>
            立即生成</el-button>
        </div>
      </div>
      <div v-show="selectLandVis" class="creat-land-map">
        <farm-land-select
          ref="refLandSelect"
          @change="changLandList"
          @onInitMap="changeMapWidth"
          :selectList ="mapBackData.selectLands"
          @close="selectLandVis = false" />
      </div>
      <c-dialog
          v-if="dialogFlag"
          v-model:show="dialogFlag"
          :title="dialogInfo.title"
          :show-btn="false"
          :width="dialogInfo.width"
          @close="dialogFlag = false">
            <add-breed
              v-if="dialogInfo.type == 5"
              :stages-item="dialogInfo.options"
              @close="dialogFlag = false"
              @change="changeList"
            />
    </c-dialog>
    </main-layout>
    <vxe-modal v-model="showDialog" :showHeader="false" top="200px" width="500">
        <template #default>
          <plan-auto-create-progress v-if="showDialog" @close="showDialog=false" @finish="showDialog=false;save()"/>
        </template>
    </vxe-modal>
  </div>
</template>

<script setup name="Plant-Plan-Create">
// 这里的name是为了做页面缓存，其值要跟路由里面的name值一样
import { nextTick, ref, reactive, watch, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getCropList } from '@/api/plant'
import { getFarmLandsList } from '@/api/gis'
import { emitter } from '@/utils/bus.js'
import mainLayout from '@/components/custom/mainLayout.vue'
import cropSelect from '@/components/custom/cropSelect.vue'
import addBreed from './components/addBreed.vue'
import cDialog from '@/components/custom/cDialog.vue'
import cropSeriesSelect from '@/components/custom/cropSeriesSelect.vue'
import planAutoCreateProgress from './components/planAutoCreateProgress.vue'
import farmLandSelect from './select-land.vue'
import { message } from '@/utils/element'
import {checkPlantingModel} from '@/api/plant'
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()
const router = useRouter()
const route = useRouter()
const formdata = ref({isZaisheng:false})
const plantHeaderId = ref('')
const tillageWayList = ref([])
const landDataList = ref([])
const openMap = ref(0)
const refLandSelect =ref(null)
const dialogFlag = ref(false)
const dialogInfo = ref({
  title: '标题',
  type: 1 
})

const showDialog = ref(false)
const showRed = ref(false)
const selectLandVis = ref(false)
const mapBackData = ref({})
let mapWidthView = null
onMounted(async() => {
  plantHeaderId.value = route.currentRoute.value.query.id
})

const getWayList =async ()=>{
  const res = await getCropList({ page: 1, limit: 200, param1:formdata.value.cropId,lovCode: 'TANC_TILLAGE_WAY'})
  if(res.success){ 
    tillageWayList.value = res.data||[]
  }
}


const openSelectDg = async() => {
  selectLandVis.value = true
  if(openMap.value==0){
    mapBackData.value.selectLands=[]
    openMap.value =1
  }else{
    openMap.value=2
  }
 window.setTimeout(() => {
    mapWidthView.resize()
  },30);
}

const changLandList = async ({selects,total})=>{
  mapBackData.value.selectLands =selects
    if(total>0){
      mapBackData.value.farmLandName =`${selects.length}块地,${total}亩`
      mapBackData.value.totalLandArea =total
    }else{
      mapBackData.value.farmLandName =''
    }
}

const changeMapWidth=(map)=>{
  mapWidthView=map
}
const close = () => {
  router.push(`/manage/plan/list`)
  emitter.emit('reload') // 刷新页面
}

const changeList = (cropId) => {
  formdata.value.cropId = ''
  setTimeout(() => {
    formdata.value.cropId = cropId
  }, 500)
}


const delSubmit =()=>{
  formdata.value={}
}
const blurTargetYield =(e)=>{
  if(formdata.value.targetYield>1000||formdata.value.targetYield<200){
    showRed.value = true
  }else{
    showRed.value = false
  }
}

const palnSubmit = ()=>{
  if (!formdata.value.cropId) {
    return message('请选择作物', 3)
  } else if (!formdata.value.cropSeriesId) {
    return message('请选择作物品种', 3)
  }else if (!formdata.value.targetYield) {
    return message('请输入每亩目标产量', 3)
  }else if (formdata.value.targetYield<200||formdata.value.targetYield>1000) { 
    returnmessage('输入亩产目标不符合实际需求，请核实修改', 3)
  }else if (!formdata.value.tillageWayId) {
    return message('请选择耕种方式', 3)
  }else if(!mapBackData.value.farmLandName){
      return message('请选择种植地块', 3)
  }
  showDialog.value = true
}


const save = async() => {
      formdata.value.tillageWayName= tillageWayList.value.filter((item)=>{
      return item.code == formdata.value.tillageWayId
    })[0].meaning
    formdata.value.farmLandName=mapBackData.value.farmLandName
    formdata.value.selectLands= mapBackData.value.selectLands
    formdata.value.genMethod= 2
    let res = await checkPlantingModel({...formdata.value,selectLands:[]})
    if(res.success){
      formdata.value.totalLandArea= mapBackData.value.totalLandArea
      sessionStorage.setItem('formdata',JSON.stringify(formdata.value))
      route.push('/manage/plan/add?data=template')
    }else{
      message(res.message, 3)
    }
}

</script>

<style lang="scss">
.creat-land-map {
  position: relative;
  overflow: hidden;
  height: calc(100vh - 100px);
  overflow: hidden;
  width: 100%;
  margin:0;
}

.show-error{
    padding: 10px;
  color: red;
  font-size: 13px;
}
.plantFormBox {
  margin: -20px 0 0 -10px;

  .formItem {
    &+.formItem {
      margin-top: 20px;
    }

    .btnadd {
      display: flex;
      align-items: center;
      padding: 6px 10px;
      background-color: #E5F7F0;
      font-size: 14px;
      color: #04AE70;
      cursor: pointer;
      border-radius: 2px;
      margin-left: 30px;
    }

    h5 {
      display: flex;
      font-size: 16px;
      align-items: center;
      height: 26px;
      color: #333;
      margin: 0 0 10px 0;
      padding: 0;
      text-indent: 4px;
      padding: 0 0 8px 0;
      border-bottom: 1px solid #ededed;

      &::before {
        content: '';
        display: block;
        width: 3px;
        background: #FF9C00;
        height: 16px;
        margin: 0 3px 0 0;
      }
      span {
        font-weight: normal;
      }
    }

    .inputItem {
      display: flex;
      align-items: center;
      margin: 5px 0 0 0;
      padding: 6px;
      background-color: #f7f7f7;
      border: 1px solid #eee;

      .lable {
        flex-shrink: 0;

        span {
          color: #f70808;
        }
      }
    }

    .mytips {
      font-size: 12px;
      color: #999;
      -ms-transform: scale(0.95);
      /* IE 9 */
      -webkit-transform: scale(0.95);
      /* Safari */
      transform: scale(0.95);
      /* 标准语法 */
      -webkit-origin: 0 0;
      transform-origin: 0 0;
      margin: 10px 0 10px 0;
    }

    .itemTableBox {
      width: 100%;
      min-width: 1150px;
      border: 1px solid #e6e4e4;
      border-collapse: collapse;

      th,
      td {
        text-align: left;

        span {
          color: #f70808;
        }
      }

      th {
        background-color: #f7f7f7;
        height: 30px;
        padding: 4px 8px;

        &+th {
          border-left: 1px solid #f7f7f7;
        }
      }

      td {
        text-align: left;
        padding: 6px 8px;
        border-top: 1px solid #e6e4e4;

        &+td {
          border-left: 1px solid #fff;
        }

      }

      .tbItemFlex {
        display: flex;
        align-items: center;

        .el-icon {
          cursor: pointer;

          &:hover {}
        }
      }
    }
  }

  .itemtitle {
    h5 {
      &::after {
        content: "";
        display: none;
      }
    }
  }

  .cbjs {
    padding: 15px;
    background-color: #00AF7010;
    margin-top: 10px;
    color: #666;

    b {
      font-size: 18px;
      color: #FF9C00;
      margin-right: 4px;
    }
  }
}
.myBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    right:0;
    top: 0;
    height: 100%;
    color:#333;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    padding: 0;
    box-sizing: border-box;
    height: 30px;
    width: 80px;
    border-radius: 2px;
    border: 1px solid #DDDDDD;
    &.comfirmBtn{
      right:100px;
      background-color: #04AE70;
      color: #fff;
      border: 1px solid #04AE70;
      &:hover{
        cursor: pointer;
        background-color: #049a63;
        color: #fff;
      }
    }
    &:hover{
      cursor: pointer;
      background-color: #00AF7010;
      color: #25B983;
    }
    img{
      display: block;
      height: 14px;
      margin: 0 10px 0 0;
    }
    &+.myBtn{
      margin-left: 10px;
    }
  }
</style>

<style lang="scss">
.plantFormBox {
  .el-input__inner {
    font-size: 12px !important;
  }

  .mydaterange {
    width: 330px;

    input {
      font-size: 12px !important;
    }
  }

  .el-input--suffix {
    i {
      color: #999 !important;
    }
  }
}
.tips-text{
  padding-left: 5px;
  font-size: 13px;
  padding-top:5px;
  color: #FF9C00;
}
.el-dialog{
&.autoCreateDgBox{
  box-sizing: border-box;
  width: 510px;
  height: 475px;
  padding: 20px 55px;
  .el-dialog__header{
    border: 0;
  }
  .el-dialog__body{
    padding: 0;
  }
  .el-icon{
    font-size: 20px;
  }
}
}
</style>

